<template>
    <el-dialog id="confirmDialog" v-if="visible" class="confirm-dialog" :title="title || $t('login.reason_tips')" @close="close" :visible.sync="visible" :show-close="showClose" :close-on-press-escape="isEsc">
        <slot></slot>

        <div class="confirm-loading">
            <div class="loading-box" v-if="loadingStatus">
                <div class="loading-animate" ref="loadingRef"></div>
                <div class="loading-countdown" v-if="isShowCountdown" :id="countdownId">{{ countdown }}</div>
            </div>
        </div>
        <span slot="footer" v-if="footerStatus">
            <el-button :loading="btnLoading" :id="confirmId" type="primary" :disabled="disabled" @click="confirm">{{ confirmText || $t('common.confirmButton') }}</el-button>
            <el-button :loading="btnLoading" :id="cancelId" v-if="showCancel" @click="cancel">{{ cancelText || $t('common.cancelButton') }}</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { throttle } from 'lodash-es';

export default {
    name: 'ConfirmDialog',
    inject: ['reload'],
    props: {
        // 弹窗标题
        title: {
            type: String
        },

        // 确认按钮文本
        confirmText: {
            type: String
        },

        // 退出按钮文本
        cancelText: {
            type: String
        },

        // 是否展示右上角关闭 icon
        showClose: {
            type: Boolean,
            default: false
        },

        // 是否隐藏退出按钮
        showCancel: {
            type: Boolean,
            default: true
        },

        // 是否显示 加载动画
        isShowLoading: {
            type: Boolean,
            default: false
        },

        // 是否显示倒计时
        isShowCountdown: {
            type: Boolean,
            default: true
        },

        // 是否展示底部按钮
        isShowFooter: {
            type: Boolean,
            default: true
        },

        // 倒计时
        count: {
            type: Number,
            default: 30
        },

        // reload 页面开关
        reloadSwitch: {
            type: Boolean,
            default: false
        },

        // 是否有成功消息提醒
        isShowSuccessMessage: {
            type: Boolean,
            default: true
        },

        //是否可以通过按下 ESC 关闭 Dialog
        isEsc: {
            type: Boolean,
            default: false
        },

        // 确认按钮的ID
        confirmId: {
            type: String,
            default: 'confirmDialogBtn'
        },

        // 取消按钮的ID
        cancelId: {
            type: String,
            default: 'cancelDialogBtn'
        },

        // 倒计时数字的ID
        countdownId: {
            type: String,
            default: 'confirmDialog_countdown'
        },

        // 按钮加载模式
        btnLoading: {
            type: Boolean,
            defalut: false
        }
    },
    data() {
        return {
            visible: false,
            timer: 0,
            countdown: this.count,
            footerStatus: this.isShowFooter,
            loadingStatus: this.isShowLoading,
            disabled: false
        };
    },
    watch: {
        count(nval) {
            this.countdown = nval;
        },
        isShowCountdown() {
            if (this.isShowCountdown && this.loadingStatus && this.visible) {
                this.startCountdown();
            }
        },
        loadingStatus() {
            const status = this.isShowCountdown && this.loadingStatus && this.visible;
            if (status) {
                this.startCountdown();
            } else {
                if (this.reloadSwitch) {
                    this.reload();
                }
            }
        },
        isShowFooter(nval) {
            this.footerStatus = nval;
        }
    },
    methods: {
        /**
         * @description 初始化弹窗数据
         */
        init() {
            clearInterval(this.timer);
            this.timer = null;
            this.countdown = this.count;
            this.footerStatus = this.isShowFooter;
            this.loadingStatus = this.isShowLoading;
            this.visible = false;
            this.disabled = false;
        },

        /**
         * @description 弹窗确认按钮
         */
        confirm: throttle(function () {
            if (!this.disabled) {
                this.$emit('confirm');
            }
        }, 500),

        /**
         * @description 弹窗退出按钮
         */
        cancel: throttle(function () {
            this.$emit('cancel');
            this.hide();
        }, 500),

        /**
         * @description 展示弹窗
         */
        show() {
            this.visible = true;
        },

        /**
         * @description 隐藏弹窗
         */
        hide() {
            this.visible = false;
        },

        /**
         * @description 开启倒计时
         */
        startCountdown() {
            let startTime = Date.now();
            let startCount = this.countdown;
            if (!this.timer) {
                this.timer = setInterval(() => {
                    this.countdown = startCount - parseInt((Date.now() - startTime) / 1000);
                    this.countdown = this.countdown < 0 ? 0 : this.countdown;

                    if (this.countdown <= 0) {
                        if (this.isShowSuccessMessage) {
                            this.$message.success(this.$t('common.success'));
                        }
                        this.shopCountDown();
                        this.$emit('countdownEnd', this.countdown);
                    }
                }, 1000);
            }
        },

        /**
         * @description 停止倒计时，并且初始化页面所有值
         */
        shopCountDown() {
            clearInterval(this.timer);
            this.timer = null;
            setTimeout(() => {
                this.hide();
                this.countdown = this.count;
                this.footerStatus = this.isShowFooter;
                this.loadingStatus = this.isShowLoading;
            }, 500);
        },

        /**
         * @description 是否要进行 按钮 和 loading 样式的切换
         */
        changeDialogStyle: throttle(function (status) {
            if (!status && !this.timer) {
                this.changeFooterStatus();
                this.changeLoadingStatus();
            }
        }, 500),

        /**
         * @descrition 改变底部按钮状态
         */
        changeFooterStatus: throttle(function () {
            this.footerStatus = !this.footerStatus;
        }, 500),

        /**
         * @descrition 改变loading 状态
         */
        changeLoadingStatus: throttle(function () {
            this.loadingStatus = !this.loadingStatus;
        }, 500),

        /**
         * @descrition 禁用confirm 按钮
         */
        banConfirm() {
            this.disabled = true;
        },

        /**
         * @descrition 取消禁用confirm 按钮
         */
        cancelBanConfirm() {
            this.disabled = false;
        },

        close: throttle(function () {
            this.$emit('close');
        }, 500)
    }
};
</script>

<style scoped lang="less">
.confirm-dialog {
    --borderColor: @blueColor;
    white-space: pre-wrap;
    /deep/ .el-dialog {
        border-radius: 20px;
        max-width: 420px;
        min-width: 320px;
    }

    /deep/ .el-dialog__title {
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: Bold;
        font-size: 20px;
        color: #000000;
        word-break: keep-all;
    }

    /deep/ .el-dialog__body {
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-size: 14px;
        color: #000000;
        word-break: keep-all;
        line-height: 28px;
    }

    /deep/ .el-dialog__footer {
        text-align: left;
    }

    /deep/ .el-button {
        min-width: 120px !important;
        max-width: 380px;
        height: 52px;
        border-radius: 50px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 4px;
    }

    /deep/ .el-button--primary {
        background-color: @buttonColor;
        border-color: @buttonColor;
    }

    /deep/ .el-button--info {
        background-color: rgba(0, 0, 0, 0.1);
        border-color: rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.6);
    }

    .loading {
        &-box {
            position: relative;
            margin: 12px auto 0px;
            width: 62px;
            height: 62px;
            box-sizing: border-box;
        }
        &-countdown {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
            font-weight: 600;
        }
        &-animate {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 56px;
            height: 56px;
            border: 3px solid var(--borderColor);
            border-top-color: transparent;
            border-radius: 50%;
            animation: rotate 1s linear infinite;
        }
    }
    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
}
</style>
